<template>
  <div style="padding:2vw">
    <div style="height: 800px">
      <div class="main-header">
        名称:<el-input type="text" placeholder="请输入内容" style="margin-right: 5vw; margin-left: 1vw;width: 200px"
                  v-model:style="queryName"/>
        <el-button type="primary" @click="check()">查询</el-button>
        <el-button type="primary" style="float: right; margin-right: 1vw" @click="openAddOrUpdate('add', null)">新增
        </el-button>

        <el-dialog :title="dialogTitle" :visible.sync="dialogFormVisible">
          <el-form :model="form">
            <el-form-item label="频道名称" label-width=120px>
              <el-input v-model="form.name" style="width: 200px;"></el-input>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="form.id ==='' ? addChannel() : updateChannel()">保 存</el-button>
          </div>
        </el-dialog>
      </div>
      <div>
        <el-table :data="tableData" border style="width: 100%">
          <el-table-column fixed label="序号" width="100" align="center">
            <template slot-scope="scope">
              <span>{{ scope.row.num }}</span>
            </template>
          </el-table-column>
          <el-table-column label="名称" width="200" align="center">
            <template slot-scope="scope">
              <span>{{ scope.row.name }}</span>
            </template>
          </el-table-column>
          <el-table-column label="创建时间" min-width="200" align="center">
            <template slot-scope="scope">
              <span>{{ scope.row.createTime }}</span>
            </template>
          </el-table-column>
          <el-table-column label="修改时间" min-width="200" align="center">
            <template slot-scope="scope">
              <span>{{ scope.row.updateTime }}</span>
            </template>
          </el-table-column>
          <el-table-column fixed="right" label="操作" width="100" align="center">
            <template slot-scope="scope">
              <el-button type="text" size="small" @click="openAddOrUpdate('update', scope.row)">编辑</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div style="float: right; margin-top: 10vh">
        <el-pagination
            background
            :page-size="size"
            layout="sizes, prev, pager, next,jumper"
            :page-sizes="[10]"
            :total="total"
            @current-change="upPage"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dialogTitle: "",
      dialogFormVisible: false,
      form: {
        id: '',
        name: '',
      },
      queryName: '',
      tableData: [
        {
          id: "",
          num: 0,
          name: "",
          createTime: "",
          updateTime: "",
        },
      ],
      current: 1,
      pages: 0,
      size: 10,
      total: 0,
    };
  },
  methods: {
    //更新页码
    upPage(val) {
      this.current = val;
      this.check();
    },
    //修改频道
    updateChannel() {
      let url = '/api/lzs/channel/update'
      let params = {
        id: this.form.id,
        name: this.form.name
      }
      this.http.post(url, params).then(() => {
        this.dialogFormVisible = false;
        this.$message.success('修改成功');
        this.$router.go(0)
      })
    },
    //新增频道
    addChannel() {
      let url = "/api/lzs/channel/add"
      let params = {
        name: this.form.name
      }
      this.http.post(url, params).then(() => {
        this.dialogFormVisible = false;
        this.$message.success('新增成功')
        this.$router.go(0)
      })
    },
    //查询数据
    check() {
      let url = '/api/lzs/channel/page'
      let params = {
        currentPage: this.current,
        name: this.queryName,
        pageSize: this.size
      }
      this.http.post(url, params).then((res) => {
        let data = res.data.data;
        this.total = data.total;
        this.pages = data.pages;
        this.size = data.size;
        this.current = data.current;
        this.tableData = [];
        for (let i in data.records) {
          let temp = {
            id: data.records[i].id,
            num: (Number(this.current) - 1) * Number(this.size) + 1 + Number(i),
            name: data.records[i].name,
            createTime: data.records[i].createTime,
            updateTime: data.records[i].updateTime,
          };
          this.tableData.push(temp);
        }
      })
    },

    //打开方式
    openAddOrUpdate(type, record) {
      if (type === "add") {
        this.dialogTitle = "新增";
        this.dialogDisabled = false;
        this.form.id = "";
        this.form.name = "";
      } else if (type === "update") {
        this.dialogTitle = "编辑";
        this.dialogDisabled = true;
        this.form.id = record.id;
        this.form.name = record.name;
      }
      this.dialogFormVisible = true;
    }
  },
  mounted() {
    this.check();
  },
};
</script>

<style lang="scss" scoped>
.main-header{
  margin-bottom: 1vh;
}
</style>
